<template>
  <PageLayout>
    <template #header>
      <BasicForm :options="queryOptions" @ok="onQueryDataByParams"></BasicForm>
    </template>
    <div class="table-box">
      <div class="head-box">
        <div class="title">服务订单</div>
        <a-space :size="16">
          <a-button type="primary" @click="importFile">导出</a-button>
        </a-space>
      </div>
      <div class="bg-fff">
        <!-- :apiFetch="apiFetch"  -->
        <BasicTable
          ref="tableRef"
          :columns="columns"
          :query-params="queryData"
          :apiFetch="postFinancialBillOrderPage"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'action'">
              <a-space
                class="space-btn--box"
                :size="10"
                v-if="record.refundFlag === false && record.status == 1"
              >
                <a class="btn" @click="refund(record)">退费</a>
              </a-space>
            </template>
          </template>
        </BasicTable>
      </div>
    </div>
  </PageLayout>
</template>

<script name="finance-serve-list" setup>
import {
  postFinancialBillOrderPage,
  postFinancialOrderRefund,
  postFinancialOrderExport
} from "@/api/common";
import { useStoreCommonEnum } from "@/store";
import { areaJson } from "@/utils/area";
const storeCommonEnum = useStoreCommonEnum();
const router = useRouter();
const queryOptions = ref([
  {
    name: "订单号",
    type: "input",
    value: "",
    placeholder: "请输入",
    filed: "orderNo",
  },
  {
    name: "门店名称",
    type: "input",
    value: "",
    placeholder: "请输入",
    filed: "shopName",
  },
  {
    name: "日期",
    type: "range-picker",
    value: [],
    placeholder: "请选择",
    filed: "rangeDate",
    dateFields: ["startCreateTime", "endCreateTime"],
  },
  {
    name: "套餐类型",
    type: "input",
    value: "",
    placeholder: "请输入",
    filed: "packageName",
  },
]);
const columns = ref([
  {
    title: "序号",
    dataIndex: "index",
    width: "80px",
    customRender: (record) => `${record.index + 1}`,
  },
  {
    title: "日期",
    dataIndex: "createTime",
    key: "createTime",
    width: 200,
    // ellipsis: true,
    resizable: true,
    minWidth: 200,
    maxWidth: 300,
  },
  {
    title: "订单编号",
    dataIndex: "orderNo",
    key: "orderNo",
    width: 200,
    ellipsis: true,
    resizable: true,
    minWidth: 200,
    maxWidth: 300,
  },
  {
    title: "信用分消耗",
    dataIndex: "amount",
    key: "amount",
    width: "120px",
    ellipsis: true,
  },
  {
    title: "套餐类型",
    dataIndex: "packageName",
    key: "packageName",
    width: 120,
    ellipsis: true,
    resizable: true,
    minWidth: 120,
    maxWidth: 200,
  },

  {
    title: "设备号",
    dataIndex: "deviceNo",
    key: "deviceNo",
    width: "200px",
    ellipsis: true,
  },
  {
    title: "店铺名称",
    dataIndex: "shopName",
    key: "shopName",
    width: "200px",
    ellipsis: true,
  },
  {
    title: "店铺ID",
    dataIndex: "shopId",
    key: "shopId",
    width: "200px",
    ellipsis: true,
  },
    {
    title: "用户ID",
    dataIndex: "clientUserId",
    key: "clientUserId",
    width: "200px",
    ellipsis: true,
  },
  {
    title: "地区",
    dataIndex: "province",
    key: "province",
    width: "200px",
    ellipsis: true,
    customRender: ({ record }) => {
      // console.log("record", record);
      return `${record.province}/${record.city}/${record.area}`;
    },
  },
  {
    title: "商户名称",
    dataIndex: "shopUserName",
    key: "shopUserName",
    width: "150px",
    ellipsis: true,
  },
  // {
  //   title: "代理商",
  //   dataIndex: "aa",
  //   key: "aa",
  //   width: "150px",
  //   ellipsis: true,
  // },
  // {
  //   title: "区域经理",
  //   dataIndex: "aa",
  //   key: "aa",
  //   width: "150px",
  //   ellipsis: true,
  // },
  // {
  //   title: "客户专员",
  //   dataIndex: "aa",
  //   key: "aa",
  //   width: "150px",
  //   ellipsis: true,
  // },
  {
    title: "订单评价",
    dataIndex: "score",
    key: "score",
    width: "150px",
    ellipsis: true,
  },
  {
    title: "订单状态",
    dataIndex: "status",
    key: "status",
    width: "150px",
    ellipsis: true,
    customRender: ({ record }) => {
      const statusObj = {
        0: "使用中",
        1: "紧急停机",
        2: "待评价",
        3: "已完成",
      };
      // console.log("record", record);
      return statusObj[record.status];
    },
  },

  {
    title: "操作",
    fixed: "right",
    dataIndex: "action",
    key: "action",
    width: 200,
  },
]);

const queryData = reactive({});
const tableRef = ref(null);
const onQueryDataByParams = (params) => {
  for (let key in params) {
    queryData[key] = params[key];
  }
  tableRef.value.refreshTableData();
};
const refund = (record) => {
  postFinancialOrderRefund({ id: record.id }).then((data) => {
    tableRef.value.fetch();
  });
};

const edit = (record) => {
  router.push({
    path: "/sys/account/edit",
    query: {
      id: record?.id,
    },
  });
};

const dataSource = ref(
  Array.from({ length: 11 }, () => ({
    spaceName: "2121",
  }))
);

const importFile = () => {
  if (!tableRef.value.data?.length) {
    message.error("暂无数据");
    return;
  }
  const params = {};

  for (let key in queryData) {
    params[key] = queryData[key];
  }
  postFinancialOrderExport(params).then((res) => {
    message.success("导出成功");
  });
};
</script>

<style lang="less" scoped></style>
